<template>
    <div class="wrap">
        <div class="topTitle">
            <div v-for='(item,index) in tabs' @click='toActive(index)'>
                <span :class="{'active':falg==index}">{{item.name}}</span>
            </div>
        </div>
       	 <v-Content>
	    	<div class="listwrap">
	            <v-dealBuy v-show="falg==0"></v-dealBuy>
	            <v-dealSell v-show="falg==1"></v-dealSell>
	            <v-dealSettlement v-show="falg==2"></v-dealSettlement>
	       </div>
       	 </v-Content>
    </div>
</template>

<script>
import dealBuy from './dealBuy'
import dealSell from './dealSell'
import dealSettlement from './dealSettlement'
import Content from '@/components/ContentBottom2'
export default {
    data() {
        return {
            falg: 0,
            tabs: [
                { name: '点买' },
                { name: '点卖' },
                { name: '结算' }
            ]
        }
    },
    components: {
        'v-dealBuy': dealBuy,
        'v-dealSell': dealSell,
        'v-dealSettlement': dealSettlement,
        'v-Content': Content,
      
    },
    methods: {
        toActive(index) {
            this.falg = index
        }
    }
}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.wrap {
    background-color: @bgColor;
    .topTitle {
        height: 1.09333rem;
        line-height: 1.09333rem;
        width: 100%;
        font-size: 0;
        background-color: @liBg;
        div {
            width: 33.3333%;
            display: inline-block;
            text-align: center;
            span {
                display: inline-block;
                width: 1.6rem;
                height: 1.09333rem;
                line-height: 1.09333rem;
                color: @fcolor;
                font-size: 0.37333rem;
            }
            .active {
                color: @actColor;
                border-bottom: 0.053rem solid @actColor;
            }
        }
    }
}
</style>
